<template>
  <div class="inst_index">
    <ga-alert class="alert_info">
      This is an info alert.
      <template #action>
        <ga-link :hoverable="false">查看项目总配额</ga-link>
      </template>
    </ga-alert>
    <ga-form ref="formRef" :model="formData">
      <ga-form-item
        :content-flex="false"
        tooltip="实例实例实例实例实例实例实例实例实例实例实例"
        field="cluster"
        label="实例"
        label-col-flex="120px"
        :rules="[RULE.NOT_NULL]"
        :validate-trigger="['change', 'input']"
      >
        <ga-form-item class="cus_form_item" label="筛选" label-col-flex="38px">
          <ga-select
            v-model="listQuery.vcpu"
            allow-clear
            style="width: 236px; margin-right: 16px"
            placeholder="全部vCPU"
            @change="fetchSpecsData"
          >
            <ga-option v-for="(item, idx) in cpuType" :key="idx" :value="item.value">
              {{ item.label }}
            </ga-option>
          </ga-select>
          <ga-select
            v-model="listQuery.memory"
            style="width: 236px"
            placeholder="全部内存"
            allow-clear
            @change="fetchSpecsData"
          >
            <ga-option v-for="item in memType" :key="item.id" :value="item.value">
              {{ item.label }}
            </ga-option>
          </ga-select>
        </ga-form-item>
        <ga-form-item class="cus_form_item" label="架构" label-col-flex="38px">
          <cusRadio v-model="formData.arch" :dataList="dataList" />
        </ga-form-item>
        <div class="specs">
          <ga-form-item class="cus_form_item" label="规格" label-col-flex="30px">
            <ga-table
              row-key="id"
              style="background: #fff"
              size="small"
              :loading="loading"
              :scroll="{ y: 160 }"
              :pagination="false"
              :row-selection="{ type: 'radio', width: 50 }"
              :columns="columns"
              :data="tableSpecsData"
              :bordered="false"
              :hoverable="false"
              v-model:selectedKeys="formData.selectedId"
            />
          </ga-form-item>
        </div>
      </ga-form-item>
      <ga-form-item
        tooltip="镜像镜像镜像镜像镜像"
        label="镜像"
        label-col-flex="120px"
        :rules="[RULE.NOT_NULL]"
        style="margin: 0"
      >
        <cusRadio v-model="formData.arch" :dataList="optSystemList" />
      </ga-form-item>
      <ga-form-item
        field="image"
        label-col-flex="120px"
        :rules="[RULE.NOT_NULL]"
        hide-asterisk
        :validate-trigger="['change', 'input']"
      >
        <ga-select
          v-model="formData.image"
          allow-clear
          style="width: 236px"
          placeholder="请选择镜像"
          @change="fetchSpecsData"
        >
          <ga-option v-for="(item, idx) in imageList" :key="idx" :value="item.id">
            {{ item.name }}
          </ga-option>
        </ga-select>
      </ga-form-item>
      <ga-form-item
        tooltip="磁盘磁盘磁盘磁盘"
        field="disk"
        label="磁盘"
        label-col-flex="120px"
        :rules="[RULE.NOT_NULL]"
        :validate-trigger="['change', 'input']"
      >
        <div class="specs">
          <ga-form-item label-col-flex="30px">
            <addDiskTable />
          </ga-form-item>
        </div>
      </ga-form-item>
      <ga-form-item
        tooltip="网络网络网络网络网络网络"
        field="network"
        label="网络"
        label-col-flex="120px"
        :rules="[RULE.NOT_NULL]"
        :validate-trigger="['change', 'input']"
      >
        <div class="specs">
          <ga-form-item label-col-flex="30px">
            <addNetTable />
          </ga-form-item>
        </div>
      </ga-form-item>
    </ga-form>
  </div>
</template>
<!-- <ga-table-kv
              style="background: #fff"
              :columns="diskColumns"
              :data="diskList"
              size="small"
              :border="false"
              addText="添加磁盘"
              @handleAddClick="handleAddDisk"
            /> -->
<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { RULE } from "@/constant/validators";
import { getComputingSolutionList } from "@/api/computingSolution";
import { getImageList } from "@/api/image";
import { getOperatingSystemList } from "@/api/operatingSystem";
import { cpuType, memType } from "@/constant";
import cusRadio from "../common/cusRadio.vue";
import addDiskTable from "../common/addDiskTable.vue";
import addNetTable from "../common/addNetTable.vue";
import useLoading from "@/hooks/loading";
const { loading, setLoading } = useLoading(true);

const formData = reactive({
  arch: "",
  selectedId: [],
  netArea: "",
  image: "",
});
const listQuery = reactive({
  limit: -1,
  vcpu: "",
  memory: "",
});
// 改变方法
const handleChangehh = (val) => {
  console.log("改变方法", formData.arch);
};
// 添加磁盘法
const diskList = ref([]);
const handleAddDisk = (idx) => {
  console.log("添加磁盘法", idx);

  // console.log("功能区==netArea==", formData.netArea);
  // checkedNet.value = idx;
};
// 获取计算方案列表
const tableSpecsData = ref([]);
const fetchSpecsData = async () => {
  setLoading(true);
  try {
    const { data } = await getComputingSolutionList(listQuery);
    tableSpecsData.value = data.items;
  } finally {
    setLoading(false);
  }
};
// 获取操作类型列表
const optSystemList = ref([]);
const fetchOptSystemData = async () => {
  try {
    const { data } = await getOperatingSystemList({ limit: -1 });
    optSystemList.value = data.items;
  } catch (err) {
    console.log(err);
  }
};
// 获取镜像列表
const imageList = ref([]);
const fetchImageData = async () => {
  try {
    const { data } = await getImageList({ limit: -1 });
    imageList.value = data.items;
  } catch (err) {
    console.log(err);
  }
};
// 初始化数据
const initData = (ways) => {
  switch (ways) {
    case "dataArea":
    // checkedNet.value = 0;
    // formData.netArea = netList.value[0]?.id;
    case "netArea":
    // formData.netArea = netList.value[0]?.id;
  }
  console.log("初始化数据");
};

const dataList = ref([
  { id: 1, name: "Inter x86x86", xc: true },
  { id: 1, name: "Inter x86x86", xc: true },
  { id: 2, name: "ARM" },
  { id: 3, name: "Inter x86_64", xc: true },
]);

const handleSelect = (item) => {
  if (!item) return;
  console.log("item=====", item);
};
onMounted(() => {
  fetchSpecsData();
  fetchOptSystemData();
  fetchImageData();
  // formData.dataArea = dataList.value[0]?.id;
  // formData.netArea = netList.value[0]?.id;
});

const diskColumns = [
  {
    title: "用途",
    dataIndex: "name",
  },
  {
    title: "类型",
    dataIndex: "memory",
    type: "select",
    options: [
      { label: "112312213123123123123123123", value: "1" },
      { label: "21232131231232132131231231231", value: "2" },
    ],
    handleChange: (val) => {
      console.log("handleChange", val);
    },
  },
  {
    title: "容量",
    type: "inputNumber",
    dataIndex: "size",
  },
];
const columns = [
  {
    title: "CPU",
    dataIndex: "vcpu",
    render: ({ record }) => {
      return record.vcpu + "核";
    },
  },
  {
    title: "内存",
    dataIndex: "memory",
    render: ({ record }) => {
      return record.memory + "GB";
    },
  },
  {
    title: "CPU型号",
    dataIndex: "name",
    tooltip: true,
    ellipsis: true,
  },
];
</script>

<style scoped lang="scss">
@import "./vm.scss";
.inst_index {
  // border: 1px solid #000;
  width: 70%;
}
</style>
